<template>
  <a-tabs >
    <a-tab-pane key="1">
      <template #tab>
        <span>
          <BarChartOutlined />
          基础字段
        </span>
      </template>
      <div>
          
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="内容"
            >
              <a-input v-model:value="dataC.options.content"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="尺寸"
            >
               <a-select v-model:value="dataC.options.size" placeholder="please select your size">
                <a-select-option value="large">大</a-select-option>
                <a-select-option value="default">中</a-select-option>
                <a-select-option value="small">小</a-select-option>
               </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="形状"
            >
               <a-select v-model:value="dataC.options.shape" placeholder="please select your shape">
                <a-select-option value="">长方形</a-select-option>
                <a-select-option value="circle">圆形</a-select-option>
                <a-select-option value="round">椭圆形</a-select-option>
               </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="背景颜色"
            >
              <a-select
                          v-model:value="dataC.options.Fbackground"
                          style="width: 90px"
                          placeholder="背景颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="文字颜色"
            >
              <a-select
                          v-model:value="dataC.options.Fcolor"
                          style="width: 90px"
                          placeholder="文字颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="图标"
            >
              <a-input v-model:value="dataC.icon"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
         
      </div>
    </a-tab-pane>
    <a-tab-pane key="2">
      <template #tab>
        <span>
          <BarChartOutlined />
          其他字段
        </span>
      </template>
      <div>
        <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="配置"
            >
              <a-checkbox v-model:checked="dataC.options.disabled">
                点击是否失效
              </a-checkbox>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="边框"
            >
              <a-input v-model:value="dataC.options.Fborder"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="宽度"
            >
              <a-input-number v-model:value="dataC.options.Fwidth" :min="0"></a-input-number>
            </a-form-item>
           </a-col>
         </a-row>
      </div>
    </a-tab-pane>
    <a-tab-pane key="3">
      <template #tab>
        <span>
          <BarChartOutlined />
          事件字段
        </span>
      </template>
      <div>
          <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="配置"
            >
              <a-checkbox v-model:checked="dataC.options.routeJump">
                路由是否跳转
              </a-checkbox>
            </a-form-item>
           </a-col>
         </a-row>
          <a-row v-show="dataC.options.routeJump">
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="路由路径"
            >
              <a-input v-model:value="dataC.options.routePath"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
      </div>
    </a-tab-pane>
  </a-tabs>
  
</template>
<script>
  import { BarChartOutlined } from '@ant-design/icons-vue'

export default {
    components:{
        BarChartOutlined
    },
     props: {
      data: {
        type: Object,
        default: Object,
      },
     },
    data() {
        return{
            dataC:this.data
        }
    },
    created(){
        console.log(this.data)
    }
}
</script>


